"use client";

import Link from "next/link";
import styles from "@/components/Font.module.css";

const container =
  "min-h-screen  flex flex-col items-center justify-start px-4 sm:px-6 lg:px-8 pt-40 pb-24";

const card =
  "max-w-2xl w-600 bg-white/60 rounded-3xl shadow-md p-10 space-y-12 text-center animate-fade-in-soft backdrop-blur-md";

const miniCard =
  "bg-white/15 w-80 backdrop-blur-md rounded-2xl shadow-md p-6 transition-all duration-300 hover:scale-105 hover:shadow-lg";

const header = "space-y-6";
const btnGroup = "flex justify-center gap-20";
const loginBtn =
  "bg-[#C1B7B0] hover:bg-[#A3989D] text-white font-medium rounded-full px-12 py-3 transition-all shadow-md hover:shadow-lg";
const registerBtn =
  "bg-white border border-[#D6A7A1] text-[#D6A7A1] hover:bg-[#F4EDEB] font-medium rounded-full px-12 py-3 transition-all shadow-md hover:shadow-lg";

export default function Home() {
  return (
    <>
      <main className={`${container} relative overflow-hidden`}>
        {/* 顶部主卡片 */}
        <section className={`${card} relative z-10`}>
          <header className={header}>
            <h1 className={styles.title}>欢迎来到微百合论坛</h1>
            <p className={styles.subtitle}>探索、交流、分享</p>
          </header>

          <div className={btnGroup}>
            <Link href="/login" className={loginBtn}>
              登录
            </Link>
            <Link href="/register" className={registerBtn}>
              注册
            </Link>
          </div>
        </section>

        {/* 三个小卡片 */}
        <section className="max-w-6xl mx-auto px-4 mt-20 z-10">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                title: "🎓 学术交流",
                desc: "汇聚各学科讨论，打造自由、温暖的学术氛围。",
                color: "from-[#E9DAD2] to-[#C1B7B0]",
              },
              {
                title: "🌸 情感分享",
                desc: "无论喜悦还是迷茫，这里总有回应你心声的人。",
                color: "from-[#E8D6D0] to-[#D6A7A1]",
              },
              {
                title: "🛠 实用资源",
                desc: "课表、笔记、竞赛、活动一网打尽，效率满分！",
                color: "from-[#DAD6D2] to-[#A3989D]",
              },
            ].map(({ title, desc, color }, index) => (
              <div
                key={index}
                className={`${miniCard}`}
                style={{
                  backgroundImage: `linear-gradient(135deg, ${color})`,
                }}
              >
                <h3
                  className="text-xl font-semibold mb-2"
                  style={{
                    fontFamily: "var(--font-cormorant)",
                  }}
                >
                  {title}
                </h3>
                <p className="text-[#7A6E6E] text-sm leading-relaxed">{desc}</p>
              </div>
            ))}
          </div>
        </section>
      </main>
    </>
  );
}
